<form method="post" id="m-sign-up-form" class="sky-form sky-form-modal"
      action="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=register/manager"
      style="width: 600px">
    <header>Manager Data</header>

    <fieldset>
        <div class="row">
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-user"></i>
                    <input type="text" name="firstName" placeholder="First Name">
                </label>
            </section>
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-user"></i>
                    <input type="text" name="lastName" placeholder="Last Name">
                </label>
            </section>
        </div>

        <div class="row">
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-lock"></i>
                    <input type="password" name="password" placeholder="Password">
                </label>
            </section>
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-lock"></i>
                    <input type="password" name="passwordConfirm" placeholder="PW Confirmation">
                </label>
            </section>
        </div>
        <div class="row">
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-user"></i>
                    <input type="text" name="email" placeholder="Email">
                </label>
            </section>
        </div>
    </fieldset>

    <fieldset>
        <div class="row">
            <section class="col col-6">
                <label class="select">
                    <select name="sex">
                        <option value="" selected disabled>Sex</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                    <i></i>
                </label>
            </section>
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-calendar"></i>
                    <input type="text" id="m_birthday" name="birthday" placeholder="Date Of Birth">
                </label>
            </section>
        </div>
        <div class="row">
            <section class="col col-6">
                <label class="select">
                    <select name="citizenship">
                        <option value="" selected disabled>Citizenship</option>
                        <?php foreach ($this->countries as $country): ?>
                            <option value="<?php echo $country->id;?>"><?php echo $country->name;?></option>
                        <?php endforeach; ?>
                    </select>
                    <i></i>
                </label>
            </section>
            <section class="col col-6">
                <label class="select">
                    <select name="residence">
                        <option value="" selected disabled>Current residence</option>
                        <?php foreach ($this->countries as $country): ?>
                            <option value="<?php echo $country->id;?>"><?php echo $country->name;?></option>
                        <?php endforeach; ?>
                    </select>
                    <i></i>
                </label>
            </section>
        </div>
    </fieldset>

    <footer>
        <button type="submit" class="button">Finish</button>
        <div class="progress"></div>
    </footer>

    <div class="message">
        <i class="icon-ok"></i>

        <p>Thanks for your registration!</p>
    </div>
</form>

<script type="text/javascript">
    $(function () {
        // Date pickers
        $('#m_birthday').datepicker({
            dateFormat:'dd/mm',
            prevText:'<i class="icon-chevron-left"></i>',
            nextText:'<i class="icon-chevron-right"></i>',
            onSelect:function (selectedDate) {
            }
        });

        // Validation
        $("#m-sign-up-form").validate(
                {
                    // Rules for form validation
                    rules:{
                        firstName:{
                            required:true
                        },
                        lastName:{
                            required:true
                        },
                        password:{
                            required:true,
                            minlength:3,
                            maxlength:20
                        },
                        passwordConfirm:{
                            required:true,
                            minlength:3,
                            maxlength:20
                        }
                    },

                    // Messages for form validation
                    messages:{
                        firstName:{
                            required:'Please enter your first name'
                        },
                        lastName:{
                            required:'Please enter your last name'
                        },
                        password:{
                            required:'Please enter your password'
                        },
                        passwordConfirm:{
                            required:'Please enter your password'
                        }
                    },

                    // Ajax form submition
                    submitHandler:function (form) {
                        $(form).ajaxSubmit(
                                {
                                    beforeSend:function () {
                                        $('#m-sign-up-form button[type="submit"]').addClass('button-processing').attr('disabled', true);
                                    },
                                    success:function () {
                                        $("#m-sign-up-form").addClass('submited');
                                        $('#m-sign-up-form button[type="submit"]').removeClass('button-processing').attr('disabled', false);
                                    }
                                });
                    },

                    // Do not change code below
                    errorPlacement:function (error, element) {
                        error.insertAfter(element.parent());
                    }
                });
    });
</script>